<template>
	<view class="conter">
		<view class="tian_box">
			<view @click="gomytuan" class="my_box">我的天团</view>
			<view @click="show = true" class="my_box"
				style="background: linear-gradient(270deg, #fb5deb 0%, #8a8ff8 100%)">加入天团</view>
		</view>
		<view class="rankings_box">
			<view class="titie">
				<view>名称</view>
				<view>ID</view>
				<view>等级</view>
			</view>
			<!-- 要用list 列表 -->
			<u-list v-if="guildMemberList.length != 0" height="952rpx" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in guildMemberList" :key="index">
					<view class="list_box" @click.stop="goTianDetail(item)">
						<view class="header_box">
							<u--image width="91rpx" height="91rpx" radius="50%" :src="imgUrl + item.guildAvatar" alt=""></u--image>
						</view>
						<view class="box_max">
							<view class="name_box">{{ item.guildName }}</view>
							<view class="number_one">{{ item.id }}</view>
							<view class="number">{{ item.level }}</view>
						</view>
						<view @click.stop="applyGuild(item)" class="shegn_box">申请</view>
					</view>
				</u-list-item>

			</u-list>
			<view v-if="guildMemberList.length == 0">
				<image style="width: 280rpx; height: 280rpx; margin: 95rpx 200rpx "
					src="../../static/images/fighting.gif" mode=""></image>
			</view>
			<!-- 要用list 列表 -->
		</view>
		<!-- 加入 -->
		<u-popup bgColor="#1A1A1A" round="14" :show="show" mode="center" @close="close">
			<view class="clost_box">
				<view class="title">加入天团</view>
				<u--input v-model="uniId" color="#9E9E9E " placeholder="请输入加入天团ID"></u--input>
				<view class="button_box">
					<view @click="show = false" class="buttone">取消</view>
					<view class="buttone" @click="joinGuide" style="background-color: #eef862; color: #000">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGuildList,
		joinGuild
	} from '@/api/union/union.js';
	import config from '@/config.js';
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				inForm: '',
				show: false,
				showtow: false,
				curPage: 1,
				curPageSize: 15,
				guildMemberList: [],
				imgUrl: config.gillUrl,
				loadStatus: 'loadmore',
				status: 'loadmore',
				uniId: null
			};
		},
		created() {
			this.getGuildMemberList();
		},
		methods: {
			async isMy() {
				const data = await checkMyGuild();
				// console.log(data, 'isMy');
				if (data.code === 200) {
					this.data = data.data;
					this.guildId = data.data.guildId;
				}
			},
			//申请加入天团
			async applyGuild(item) {
				let param = {};
				param.uniId = item.id;
				const data = await joinGuild(param);
				if (data.code == 200) {
					this.$modal.showToast('申请成功');
				} else {
					this.$modal.showToast(data.msg);
				}
			},
			// 加入天团
			async joinGuide() {
				let param = {};
				param.uniId = this.uniId;
				const data = await joinGuild(param);
				if (data.code == 200) {
					this.$modal.showToast('申请成功');
					this.show = false;
				} else {
					this.$modal.showToast(data.msg);
					this.show = false;
				}
			},
			//排行榜列表
			async getGuildMemberList() {
				let param = {};
				param.curPage = this.curPage;
				param.curPageSize = this.curPageSize;
				const data = await getGuildList(param);
				let _this = this;
				// 使用map方法遍历 data.data.pageData 里面的数据传递给 _this.guildMemberList
				data.data.pageData.map((i) => {
					_this.guildMemberList.push(i);
				});
				this.totalSize = data.data.totalSize;
			},
			// list加载事件
			scrolltolower() {
				//加载时候判断是否还有下一页
				if (this.guildMemberList.length < this.totalSize) {
					this.curPage++;
					//则还有下一页
					this.status = 'loadmore';
					this.getGuildMemberList();
				} else {
					this.curPage = 1;
					this.status = 'nomore';
				}
			},
			//排行榜列表
			goTianDetail(item) {
				if (item.myGuild == '1') {
					uni.navigateTo({
						url: `/pages/tiantuan/mytuan?type=${item.myGuild}&id=${item.id}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/tiantuan/tuanDetail?type=${item.myGuild}&id=${item.id}`
					});
				}
			},
			close() {
				this.show = false;
			},
			closetow() {
				this.showtow = false;
			},
			gomytuan() {
				uni.navigateTo({
					url: `/pages/tiantuan/mytuan?type=1&id=""`
				});
			}
		}
	};
</script>

<style scoped lang="less">
	page {
		background-color: #1a1a1a;
	}
    ::v-deep .uni-input-input{
		margin-top: 5rpx;
		margin-left: 20rpx;
	}
	::v-deep .uni-input-placeholder{
		margin-left: 20rpx;
	}
	::v-deep .u-input {
		width: 467rpx;
		height: 77rpx;
		margin: auto;
		background: #2e2e2e;
		border-radius: 413rpx;
	}

	::v-deep .uni-input-placeholder {
		color: #9e9e9e;
		font-size: 31rpx;
		font-weight: 500;
		margin-top: 8rpx;
		font-family: 'font';
	}

	.conter {
		padding: 34.88rpx 34.88rpx 0;

		.clost_box {
			width: 602rpx;
			height: 424rpx;
			background: #1a1a1a;
			border-radius: 35rpx;
			border: 3rpx solid #acacac;

			.title {
				color: #ffffff;
				font-size: 45rpx;
				font-weight: 400;
				margin-top: 41rpx;
				text-align: center;
				margin-bottom: 66.28rpx;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}

			.button_box {
				display: flex;
				padding: 60rpx 36rpx 0 36rpx;
				justify-content: space-between;

				.buttone {
					width: 227rpx;
					height: 77rpx;
					text-align: center;
					line-height: 82rpx;
					background: #ff5359;
					border-radius: 17rpx;
					font-size: 31rpx;
					font-family: 'font';
					font-weight: 700;
					color: #ffffff;
				}
			}

			.button_boxpo {
				display: flex;
				padding: 10rpx 36rpx 0 36rpx;
				justify-content: space-between;

				.buttone {
					width: 227rpx;
					height: 77rpx;
					text-align: center;
					line-height: 82rpx;
					background: #ff5359;
					border-radius: 17rpx;
					font-size: 31rpx;
					font-family: 'font';
					font-weight: 700;
					color: #ffffff;
				}
			}
		}

		.tian_box {
			display: flex;
			justify-content: space-between;

			.my_box {
				width: 310rpx;
				height: 108rpx;
				color: #ffffff;
				font-weight: 400;
				font-size: 38rpx;
				line-height: 110rpx;
				text-align: center;
				border-radius: 35rpx;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
				text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
				background: linear-gradient(90deg, #50ed69 0%, #2283eb 100%);
			}
		}

		.rankings_box {
			width: 680rpx;
			padding: 34.88rpx 0;
			margin-top: 34.88rpx;
			border-radius: 52rpx;
			border: 3rpx solid #2f2f2f;
			background: linear-gradient(180deg, #191919 0%, #282828 100%);

			.titie {
				width: 300rpx;
				display: flex;
				margin: auto;
				color: #ffffff;
				font-weight: 700;
				font-size: 31rpx;
				font-family: 'font';
				align-items: center;
				margin-bottom: 34.88rpx;
				justify-content: space-between;
			}

			.list_box {
				margin: auto;
				display: flex;
				width: 645rpx;
				height: 115rpx;
				background: #1b1b1b;
				margin-top: 24.88rpx;
				border-radius: 368rpx;
				border: 2rpx solid #2f2f2f;
				align-items: center;
				padding: 0 15rpx 0 10rpx;
				justify-content: space-around;

				.header_box {
					width: 91rpx;
					height: 91rpx;
					background: #d8d8d8;
					border-radius: 44rpx;
				}

				.box_max {
					display: flex;
					width: 340rpx;
					margin-left: 10rpx;
					align-items: center;
					justify-content: space-between;

					.name_box {
						width: 135rpx;
						color: #9e9e9e;
						font-size: 35rpx;
						font-weight: 400;
						font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.number_one {
						width: 60rpx;
						color: #9e9e9e;
						font-size: 28rpx;
						font-weight: 700;
						font-family: 'font';
					}

					.number {
						width: 70rpx;
						color: #9e9e9e;
						font-size: 28rpx;
						font-weight: 700;
						text-align: center;
						font-family: 'font';
					}
				}

				.shegn_box {
					width: 136rpx;
					height: 73rpx;
					color: #353535;
					font-weight: 700;
					font-size: 28rpx;
					font-family: 'font';
					text-align: center;
					line-height: 76rpx;
					background: #eef862;
					border-radius: 38rpx;
				}
			}
		}
	}
</style>